var a
var page = 1
$.ajax({
    type: "GET",
    url: "/getboke",
    success: (data) => {
        const obj = data.data.rows
        a = Math.ceil((data.data.count) / 4)
        for (let i = 0; i < obj.length; i++) {
            $(".mainbar").append(`
            <div class="articleindex">
            <h2><span><a href="/html/xq.html?id=${obj[i].id}">${obj[i].Boketit}</a></span></h2>
            <a href="/html/xq.html?id=${obj[i].id}"<p>${obj[i].Bokecontent}...</p></a>
            <p>${obj[i].ReleaseTime}      <a class="yuedul">阅读量：${obj[i].Reading}</a></p>
          </div>
          `)
        }
        $(".mainbar").append(
            `
        <div class="fenye111">
        <li><img src="../images/left.png" class="fenyeleft"></li>
        <input tpye="text" class="fenyesousuo">
        <button  class="buttonfenye">go</button>
        </div> 
        `)
        for (let i = 0; i < a; i++) {
            $(".fenye111").append(`<li class="fenyeli${i+1}">${i+1}</li>`)
        }
        $(".fenye111").append(` <li><img src="../images/right.png" class="fenyeright"></li>`)
    }
})

$.ajax({
    type: "GET",
    url: "/getboke/getReading",
    success: (data) => {
        const obj = data.data
        for (let i = 0; i < obj.length; i++) {
            $(".ex_menu").append(`
            <li class="cebianli"><a href="/html/xq.html?id=${obj[i].id}">${obj[i].Boketit}</br>${obj[i].Reading}阅读量</a><br />
            </li>
          `)
        }
    }
})

$(".button").click(() => {
    sousuo = $("#textfield").val()
    $.ajax({
        type: "POST",
        url: "/getboke/getBookbyname",
        data: {
            sousuo: sousuo
        },
        success: (data) => {
            if (data.data.rows.length != 0) {
                const obj = data.data.rows
                $(".mainbar").html("")
                for (let i = 0; i < obj.length; i++) {
                    $(".mainbar").append(`
                    <div class="articleindex">
                    <h2><span><a href="/html/xq.html?id=${obj[i].id}">${obj[i].Boketit}</a></span></h2>
                    <a href="/html/xq.html?id=${obj[i].id}"<p>${obj[i].Bokecontent}...</p></a>
                    <p>${obj[i].ReleaseTime}        <a class="yuedul">阅读量：${obj[i].Reading}</a></p>
                  </div>
                  `)
                }
            } else {
                $(".mainbar").html("")
                $(".mainbar").append(`
                <div class="articleboke">
                没有找到博客
                </div>
                    <img class="cantfind" src="../images/cantfind.jpg">
                  `)
            }
        },
    })
})

$(".fenlei_menu").click((e) => {
    if (e.target.tagName == "A") {
        fenlei = $(e.target).text()
        $.ajax({
            type: "POST",
            url: "/getboke/getBookbyfenlei",
            data: {
                fenlei
            },
            success: (data) => {
                if (data.data.rows.length != 0) {
                    a = Math.ceil((data.data.count) / 4)
                    const obj = data.data.rows
                    $(".mainbar").html("")
                    for (let i = 0; i < obj.length; i++) {
                        $(".mainbar").append(`
                    <div class="articleindex">
                    <h2><span><a href="/html/xq.html?id=${obj[i].id}">${obj[i].Boketit}</a></span></h2>
                    <a href="/html/xq.html?id=${obj[i].id}"<p>${obj[i].Bokecontent}...</p></a>
                    <p>${obj[i].ReleaseTime}        <a class="yuedul">阅读量：${obj[i].Reading}</a></p>
                  </div>
                  `)
                    }
                    $(".mainbar").append(
                        `
                    <div class="fenye111">
                    <li><img src="../images/left.png" class="fenyeleft"></li>
                    <input tpye="text" class="fenyesousuo">
                    <button  class="buttonfenye">go</button>
                    </div> 
                    `)
                    for (let i = 0; i < a; i++) {
                        $(".fenye111").append(`<li class="fenyeli${i+1}">${i+1}</li>`)
                    }
                    $(".fenye111").append(` <li><img src="../images/right.png" class="fenyeright"></li>`)
                } else {
                    $(".mainbar").html("")
                    $(".mainbar").append(`
                <div class="articleboke">
                没有找到博客
                </div>
                    <img class="cantfind" src="../images/cantfind.jpg">
                  `)
                }
            },
        })
    }
})

$(".mainbar").click((e) => {
    if (e.target.tagName == "LI") {
        page = $(e.target).text()
        $.ajax({
            type: "GET",
            url: "/getboke",
            data: {
                page,
                limit: 4
            },
            success: (data) => {
                $(".mainbar").html("")
                const obj = data.data.rows
                for (let i = 0; i < obj.length; i++) {
                    $(".mainbar").append(`
                <div class="articleindex">
                <h2><span><a href="/html/xq.html?id=${obj[i].id}">${obj[i].Boketit}</a></span></h2>
                <a href="/html/xq.html?id=${obj[i].id}"<p>${obj[i].Bokecontent}...</p></a>
                <p>${obj[i].ReleaseTime}       <a class="yuedul"> 阅读量：${obj[i].Reading}</a></p>
              </div>
              `)
                }
                $(".mainbar").append(
                    `
                <div class="fenye111">
                <li><img src="../images/left.png" class="fenyeleft"></li>
                <input tpye="text" class="fenyesousuo">
                <button  class="buttonfenye">go</button>
                </div> 
                `)
                for (let i = 0; i < a; i++) {
                    $(".fenye111").append(`<li class="fenyeli${i+1}">${i+1}</li>`)
                }
                $(".fenye111").append(` <li><img src="../images/right.png" class="fenyeright"></li>`)
            }
        })
    } else if (e.target.tagName == "BUTTON") {
        page = $(".fenyesousuo").val()
        $.ajax({
            type: "GET",
            url: "/getboke",
            data: {
                page,
                limit: 4
            },
            success: (data) => {
                $(".mainbar").html("")
                const obj = data.data.rows
                for (let i = 0; i < obj.length; i++) {
                    $(".mainbar").append(`
                    <div class="articleindex">
                    <h2><span><a href="/html/xq.html?id=${obj[i].id}">${obj[i].Boketit}</a></span></h2>
                    <a href="/html/xq.html?id=${obj[i].id}"<p>${obj[i].Bokecontent}...</p></a>
                    <p>${obj[i].ReleaseTime}        <a class="yuedul">阅读量：${obj[i].Reading}</a></p>
                  </div>
                  `)
                }
                $(".mainbar").append(
                    `
                <div class="fenye111">
                <li><img src="../images/left.png" class="fenyeleft"></li>
                <li><img src="../images/right.png" class="fenyeright"></li>
                <input tpye="text" class="fenyesousuo">
                <button  class="buttonfenye">go</button>
                </div> 
                `)
                for (let i = 0; i < a; i++) {
                    $(".fenye111").append(`<li class="fenyeli${i+1}">${i+1}</li>`)
                }
                $(".fenye111").append(` <li><img src="../images/right.png" class="fenyeright"></li>`)
            }
        })
    } else if ($(e.target).attr("class") == "fenyeleft") {
        if (page > 1) {
            page = page - 1
            $.ajax({
                type: "GET",
                url: "/getboke",
                data: {
                    page,
                    limit: 4
                },
                success: (data) => {
                    $(".mainbar").html("")
                    const obj = data.data.rows
                    for (let i = 0; i < obj.length; i++) {
                        $(".mainbar").append(`
                    <div class="articleindex">
                    <h2><span><a href="/html/xq.html?id=${obj[i].id}">${obj[i].Boketit}</a></span></h2>
                    <a href="/html/xq.html?id=${obj[i].id}"<p>${obj[i].Bokecontent}...</p></a>
                    <p>${obj[i].ReleaseTime}      <a class="yuedul">  阅读量：${obj[i].Reading}</a></p>
                  </div>
                  `)
                    }
                    $(".mainbar").append(
                        `
                <div class="fenye111">
                 <li><img src="../images/left.png" class="fenyeleft"></li>
                <input tpye="text" class="fenyesousuo">
                <button  class="buttonfenye">go</button>
                </div> 
                `)
                    for (let i = 0; i < a; i++) {
                        $(".fenye111").append(`<li class="fenyeli${i+1}">${i+1}</li>`)
                    }
                    $(".fenye111").append(` <li><img src="../images/right.png" class="fenyeright"></li>`)
                }
            })
        }
    } else if ($(e.target).attr("class") == "fenyeright") {
        if (page < a) {
            page = page + 1
            $.ajax({
                type: "GET",
                url: "/getboke",
                data: {
                    page,
                    limit: 4
                },
                success: (data) => {
                    $(".mainbar").html("")
                    const obj = data.data.rows
                    for (let i = 0; i < obj.length; i++) {
                        $(".mainbar").append(`
                    <div class="articleindex">
                    <h2><span><a href="/html/xq.html?id=${obj[i].id}">${obj[i].Boketit}</a></span></h2>
                    <a href="/html/xq.html?id=${obj[i].id}"<p>${obj[i].Bokecontent}...</p></a>
                    <p>${obj[i].ReleaseTime}      <a class="yuedul"> 阅读量：${obj[i].Reading}</a></p>
                  </div>
                  `)
                    }
                    $(".mainbar").append(
                        `
                <div class="fenye111">
                 <li><img src="../images/left.png" class="fenyeleft"></li>
                <input tpye="text" class="fenyesousuo">
                <button  class="buttonfenye">go</button>
                </div> 
                `)
                    for (let i = 0; i < a; i++) {
                        $(".fenye111").append(`<li class="fenyeli${i+1}">${i+1}</li>`)
                    }
                    $(".fenye111").append(` <li><img src="../images/right.png" class="fenyeright"></li>`)
                }
            })
        }
    }
})